﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PhotoGallery.Core.Business.PicNode>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    重庆市公安图片管理系统
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="list-right">
        <table width="100%" cellspacing="5" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td valign="top" class="s-box" id="list-left" style="width: 320px">
                        <div class="head">
                            文件目录</div>
                        <div class="con">
                            <div style="height: 200px;">
                                根目录
                                <div id="tree" class="demo">
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="con-box">
                            <div class="head">
                                <span class="sexybutton" id="btn-search"><span><span>
                                    <input type="button" class="search" value="筛选"></span></span></span>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="StyleContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript" src="/Scripts/tree/jquery.jstree.js"></script>
    <script type="text/javascript" src="/Scripts/tree/jquery.hotkeys.js"></script>
    <script type="text/javascript" src="/Scripts/tree/jquery.cookie.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
           $("#tree").jstree({
                // the list of plugins to include

                "plugins": ["themes", "json_data", "ui", "crrm", "dnd", "cookies", "search", "types", "hotkeys", "contextmenu","search"],
                // Plugin configuration

                // I usually configure the plugin that handles the data first - in this case JSON as it is most common
                "json_data": {
                    // I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex
                    // All the options are the same as jQuery's except for `data` which CAN (not should) be a function
                    "ajax": {
                        // the URL to fetch the data
                        "url": '<%: Url.Action("Operation") %>',
                        // this function is executed in the instance's scope (this refers to the tree instance)
                        // the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)
                        "data": function (n) {
                            // the result is fed to the AJAX request `data` option
                            return {
                                "operation": "get_children",
                                "id": n.attr ? n.attr("id").replace("node_", "") : null
                            };
                        }
                    }
                },
                "themes": {
                    "theme": "apple"
                },
                "types": {
                    // I set both options to -2, as I do not need depth and children count checking
                    // Those two checks may slow jstree a lot, so use only when needed
                    "max_depth": -2,
                    "max_children": -2,
                    // I want only `drive` nodes to be root nodes 
                    // This will prevent moving or creating any other type as a root node
                    "valid_children": ["drive"],
                    "types": {
                        // The default type
                        "default": {
                            // I want this type to have no children (so only leaf nodes)
                            // In my case - those are files
                            //"valid_children": "none",
                            // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                            "icon": {
                            //"image" : "./file.png"
                        }
                    },
                    // The `folder` type
                    "folder": {
                        // can have files and other folders inside of it, but NOT `drive` nodes
                        "valid_children": ["default", "folder"],
                        "icon": {
                        //"image" : "./folder.png"
                    }
                },
                // The `drive` nodes 
                "drive": {
                    // can have files and folders inside, but NOT other `drive` nodes
                    "valid_children": ["default", "folder"],
                    "icon": {
                    //"image" : "./root.png"
                },
                // those options prevent the functions with the same name to be used on the `drive` type nodes
                // internally the `before` event is used
                "start_drag": false,
                "move_node": false,
                "delete_node": false,
                "remove": false
            }
        }
    },
    // For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin

    // the UI plugin - it handles selecting/deselecting/hovering nodes
    "ui": {
        // this makes the node with ID node_4 selected onload
        "initially_select": ["node_4"]
    },
    // the core plugin - not many options here
    "core": {
        // just open those two nodes up
        // as this is an AJAX enabled tree, both will be downloaded from the server
        "initially_open": ["node_2", "node_3"]
    }
})
        .bind("click", function (e, data) {
            if($(e.currentTarget).is("a")){  
                window.location.href="<%: Url.Action("Detail")%>?id="+$(e.currentTarget).parent().attr("id").replace("node_","");
                return false;
            }
        })
        .bind("search.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Search")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            return false;
        }) 
        .bind("view.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Detail")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            return false;
        })        
        .bind("descript.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Edit")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            
            return false;
        })
        .bind("searcher.jstree", function (e, data) {
            window.location.href="<%: Url.Action("Search")%>?id="+data.rslt.obj.attr("id").replace("node_","");
            return false;
        })
		.bind("create.jstree", function (e, data) {
		    $.post(
				'<%: Url.Action("Operation") %>',
				{
					"operation": "create_node",
					"parentid": data.rslt.parent.attr("id").replace("node_", ""),
					"position": data.rslt.position,
					"name": data.rslt.name,
					"type": data.rslt.obj.attr("rel")
				},
				function (r) {
					if (r.status) {
						$(data.rslt.obj).attr("id", "node_" + r.id);
					}
					else {
						$.jstree.rollback(data.rlbk);
					}

                     if (r.success) {
                        cy.ui.showResult({ content: r.message, disappear: 5000 });
                    } else {
                        cy.ui.showResult({ content: r.message, disappear: 5000, className: 'cy-ui-results error' });
                    }
                   
				}
			);
		})
		.bind("remove.jstree", function (e, data) {
		    data.rslt.obj.each(function () {
		        $.ajax({
		            async: false,
		            type: 'POST',
		            url: '<%: Url.Action("Operation") %>',
		            data: {
		                "operation": "remove_node",
		                "id": this.id.replace("node_", "")
		            },
		            success: function (r) {
		                if (!r.status) {
		                    data.inst.refresh();
		                }

                        if (r.success) {
                            cy.ui.showResult({ content: r.message, disappear: 5000 });
                        } else {
                            cy.ui.showResult({ content: r.message, disappear: 5000, className: 'cy-ui-results error' });
                        }
                   
		            }
		        });
		    });
		})
		.bind("rename.jstree", function (e, data) {
		    $.post(
				'<%: Url.Action("Operation") %>',
				{
				    "operation": "rename_node",
				    "id": data.rslt.obj.attr("id").replace("node_", ""),
				    "name": data.rslt.new_name
				},
				function (r) {
				    if (!r.status) {
				        $.jstree.rollback(data.rlbk);
				    }
				}
			);
		})
		.bind("move_node.jstree", function (e, data) {
		    data.rslt.o.each(function (i) {
		        $.ajax({
		            async: false,
		            type: 'POST',
		            url: '<%: Url.Action("Operation") %>',
		            data: {
		                "operation": "move_node",
		                "id": $(this).attr("id").replace("node_", ""),
		                "ref": data.rslt.np.attr("id").replace("node_", ""),
		                "position": data.rslt.cp + i,
		                "title": data.rslt.name,
		                "copy": data.rslt.cy ? 1 : 0
		            },
		            success: function (r) {
		                if (!r.status) {
		                    $.jstree.rollback(data.rlbk);
		                }
		                else {
		                    $(data.rslt.oc).attr("id", "node_" + r.id);
		                    if (data.rslt.cy && $(data.rslt.oc).children("UL").length) {
		                        data.inst.refresh(data.inst._get_parent(data.rslt.oc));
		                    }
		                }
		                $("#analyze").click();
		            }
		        });
		    });
		});

});


$(function () {
    $("#tree li").attr("class", "jstree-closed");

})
    </script>
</asp:Content>
